{% assign title = "Change password" | t %}
{% assign subtitle = "vLab account security" | t %}
{% assign prompt = "New password, new beginning" | t %}

{{ "SharedLoginHeader" | shape_new: title: title, subtitle: subtitle, prompt: prompt | shape_render }}
{% form asp_controller:"Account", asp_action:"ChangePassword", method:"post" %}
    {% helper "div", asp_validation_summary:"ModelOnly", class:"text-danger" %}
    
    <div class="row">
        <div class="col-6">
            <div class="form-group">
                {% block "label", asp_for:"CurrentPassword", class:"asterix control-label" %}{{ "Current password" | t }}{% endblock %}
                {% helper "input", asp_for:"CurrentPassword", class:"form-control", type:"password", aria_describedby:"CurrentPassword-described-by" %}
                {% helper "span", id:"CurrentPassword-described-by", asp_validation_for:"CurrentPassword", class:"text-danger" %}
            </div>
            <div class="form-group">
                {% block "label", asp_for:"Password", class:"asterix control-label" %}{{ "New password" | t }}{% endblock %}
                {% helper "input", asp_for:"Password", class:"form-control", type:"password", aria_describedby:"Password-described-by" %}
                <div id="passwordStrength"></div>
                {% helper "span", id:"Password-described-by", asp_validation_for:"Password", class:"text-danger" %}
            </div>
            <div class="form-group">
                {% block "label", asp_for:"PasswordConfirmation", class:"asterix control-label" %}{{ "Confirm new password" | t }}{% endblock %}
                {% helper "input", asp_for:"PasswordConfirmation", class:"form-control", type:"password", aria_describedby:"PasswordConfirmation-described-by" %}
                {% helper "span", id:"PasswordConfirmation-described-by", asp_validation_for:"PasswordConfirmation", class:"text-danger" %}
            </div>
        </div>
        <div class="col-6 d-flex align-items-center">
            {{ "SharedPasswordRequirementText" | shape_new | shape_render }}        
        </div>
    </div>

    <div class="form-group d-flex justify-content-center mt-5">
        <button type="submit" class="btn btn-lg btn-primary is-rounded">{{ "Change password" | t }}</button>
    </div>
{% endform %}
{{ "SharedLoginFooter" | shape_new | shape_render }}
